<template>
    <div class="setting-wrap">
        <!-- 头部 -->
        <van-nav-bar
            title="设置"           
            left-arrow
            @click-left="onClickLeft"
            placeholder
            fixed          
        />
        <main>
            <!-- logo -->
            <div class="logo">
                <img :src="logo" alt="">
                <p>ABS家居&emsp;&emsp;&emsp;V4.2.1</p>
            </div>
            <!-- 中间的各种信息 -->
            <div class="info">
                <div class="specific-info" v-for="(item,index) in setInfoList" :key="index" @click=toSpecific(index)>
                    <p>{{item}}</p>
                    <van-icon name="arrow" />
                </div>
            </div>
            <!-- 意见反馈 -->
            <div class="fadeback" @click="toFeedBack">
                <p>意见反馈</p>
                <van-icon name="arrow" />
            </div>
            <!-- 退出登录 -->
            <div class="log-out">退出登录</div>
            <!-- 关注二维码 -->
            <div class="attention">
                <p>扫描二维码或长按识别 关注ABS家居公众号</p>
                <img :src="attention" alt="">
            </div>
            
        </main>
    </div>
</template>
<script>
import Logo from "../assets/image/logo.webp"
import Attention from "../assets/image/qr-code.webp"
export default {
    data(){
        return{
           logo:Logo,
           attention:Attention,
           setInfoList:['个人资料','隐私政策','账户与安全','清除缓存']
        }
    },
    methods: {
        onClickLeft(){
            this.$router.go(-1)
        },
        toSpecific(index){
            console.log(this.setInfoList[index])
            if(index==2){
                this.$router.push('/account')
            }
        },
        toFeedBack(){
            this.$router.push('/feedback')
        }
    },
    
}
</script>

<style lang="stylus" >
 .setting-wrap
     display flex
     flex-direction column
     align-items center     
     .van-nav-bar .van-icon
        color #4e4e4e
        font-size 16px
     .van-nav-bar__title
        font-size 18px
        color #494949
        line-height 25px
     main 
        width 100%        
        flex 1
        background #f4f4f4
        .logo
            width 100%
            height 160px
            display flex
            flex-direction  column
            justify-content center
            align-items center
            img
                width 70px
                height 70px
            p
                font-size 14px
                color #a9a9a9
                line-height 20px
                font-family: PingFangSC-Regular, PingFang SC;
                margin-top 18px
        .info
            width 100%
            height 220px
            background #fff
            padding 0 25px
            .specific-info
                display flex
                justify-content space-between
                align-items center
                width 100%
                height 25%
                border-bottom 1px solid #f8f8f8
                
        .fadeback
            width 100%
            height 54px
            margin 10px 0
            padding 0 25px
            background #fff
            display flex
            justify-content space-between
            align-items center
        p                    
            font-size: 16px;
            font-family: PingFang-SC-Medium, PingFang-SC;
            font-weight: 500;
            color: #464646;
            line-height: 22px;
        .van-icon
            font-size 22px
            color #bebebe   
        .log-out
            width 100%
            height 54px
            background #ffffff            
            font-size: 16px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: #464646;
            line-height: 22px;
            text-align center
            line-height 54px
        .attention
            width 100%
            height 200px
            display flex
            justify-content space-evenly
            align-items center
            flex-direction column
            p
                
                font-weight: 500;
                color: #A3A3A3;
                line-height: 21px;
 </style>